<script type="text/javascript">  	
	$(document).ready(function(){
		var projectId = sessvars.sessionObj['projectId']
    	$('select#id_zoneInstance_name').change(function() {
				var zone_categories = []
				$('input[name="other_zones_check[]"]:checked').each(function(){
					zone_categories.push($(this).val())
				})
	    		var zoneInstanceId = $(this).val();
				$.ajax({
					type: "POST",
					url: '/pmp/zones/',
					data: JSON.stringify({'projectId': projectId, 'select': 'zoneInstance', 'zoneInstanceId': zoneInstanceId, 'zoneInstanceForm': $('form#zoneInstanceF').serializeObject(), 'zone_categories': zone_categories}),
					success: function(data){
						$('#zonesForm').html(data)	        
					}
				});
    	})
    	if (typeof sessvars.sessionObj['options'] != 'undefined'){
    		if (sessvars.sessionObj['options']){$('#zone_more_options').show(); $('#btn_more_options').addClass('active')}
    		else {$('#zone_more_options').hide()}
    	}
    	else{$('#zone_more_options').show(); $('#btn_more_options').addClass('active')}
    	$('#btn_more_options').click(function(){
    		if ($(this).hasClass('active')){
    			$('#zone_more_options').hide()
    		}
    		else{
    			$('#zone_more_options').show()
    		}
    	})
    	if (typeof sessvars.sessionObj['zone_categories'] != 'undefined'){
    		$('input[name="other_zones_check[]"]').val(sessvars.sessionObj['zone_categories'])
    	}
    	else {
    		$('input[name="other_zones_check[]"]').prop('checked',true);
    	}
    	$('#id_floor').change(function(){
			var floor = $(this).val();
			reloadMap(floor);
		});
		$('#refresh_map').click(function(){
			var floor = $('#id_floor').val()
			reloadMap(floor);
			return false;
		})
	})
   function reloadMap(floor){
		var zone_categories = []
		$('input[name="other_zones_check[]"]:checked').each(function(){
			zone_categories.push($(this).val())
		})
		sessvars.sessionObj['zone_categories'] = zone_categories
		var projectId = sessvars.sessionObj['projectId']
		var zoneInstanceId = $('select#id_zoneInstance_name').find("option:selected").val()
		$.ajax({
			type: "POST",
			url: '/pmp/zones/',
			data: JSON.stringify({'floorId': floor, 'projectId': projectId, 'select': 'floorChange', 'zoneInstanceId': zoneInstanceId, 'zoneInstanceForm': $('form#zoneInstanceF').serializeObject(), 'zoneIF': $('form#zoneIF').serializeObject(), 'zone_categories': zone_categories}),
			success: function(data){
				$('#zonesForm').html(data)
			}
		});
	}
	function addZoneInstance(){
		var zone_categories = []
		$('input[name="other_zones_check[]"]:checked').each(function(){
			zone_categories.push($(this).val())
		})
		var projectId = sessvars.sessionObj['projectId']
		$.ajax({
			type: "POST",
			url: '/pmp/zones/',
			data: JSON.stringify({'projectId': projectId, 'select': 'add', 'zoneInstanceForm': $('form#zoneInstanceF').serializeObject(), 'zone_categories': zone_categories}),
			success: function(data){
				$('#zonesForm').html(data)
				if (typeof sessvars.sessionObj.zone_defaults != 'undefined'){
					var defaults = sessvars.sessionObj.zone_defaults
					$('#id_floor').val(defaults.floor)
					$('#id_orientation').val(defaults.orientation)
					$('#id_space_type').val(defaults.space_type)
					$('#id_zone_type').val(defaults.zone_type)
					$('select#id_zone_category').val(defaults.zone_category)
					$('#id_area').val(defaults.area)
					$('#id_ceiling_reflectance').val(defaults.ceiling_reflectance)
					$('#id_nwall_reflectance').val(defaults.nwall_reflectance)
					$('#id_ewall_reflectance').val(defaults.ewall_reflectance)
					$('#id_wwall_reflectance').val(defaults.wwall_reflectance)
					$('#id_swall_reflectance').val(defaults.swall_reflectance)
					$('#id_floor_reflectance').val(defaults.floor_reflectance)
					$('#id_ceiling_finish').val(defaults.ceiling_finish)
					$('#id_nwall_finish').val(defaults.nwall_finish)
					$('#id_ewall_finish').val(defaults.ewall_finish)
					$('#id_wwall_finish').val(defaults.wwall_finish)
					$('#id_swall_finish').val(defaults.swall_finish)
					$('#id_floor_finish').val(defaults.floor_finish)
				}
				else{
					$('select#id_zone_category').val(["1","2","3","4"])
				}	        
			}
		});
	}
	function submitZoneInstance(){
		var projectId = sessvars.sessionObj['projectId']
		var zoneInstanceId = $('select#id_zoneInstance_name').find("option:selected").val()
		var zone_categories = []
		$('input[name="other_zones_check[]"]:checked').each(function(){
			zone_categories.push($(this).val())
		})
		if ($('#btn_more_options').hasClass('active')){
				sessvars.sessionObj['options'] = true
			}
			else{sessvars.sessionObj['options'] = false}
		if ($('#saveDefault').is(':checked')){
			sessvars.sessionObj['zone_defaults'] = $('form#zoneIF').serializeObject()
			sessvars.sessionObj['zone_categories'] = zone_categories
		}
		var data = {'projectId': projectId, 'select': 'submitInstance', 'zoneInstanceId': zoneInstanceId, 'zoneInstanceForm': $('form#zoneInstanceF').serializeObject(), 'zoneIF': $('form#zoneIF').serializeObject(), 'zone_categories': zone_categories}
		//necessary to massage the data because serializeObject doesn't treat single selections as an array and django needs it to be a list
		try{if (data.zoneIF.zone_category.length == 1){data.zoneIF.zone_category = [data.zoneIF.zone_category];}}
		catch(e){}
		
		$.ajax({
			type: "POST",
			url: '/pmp/zones/',
			data: JSON.stringify(data),
			success: function(data){
				$('#zonesForm').html(data)
				$('#success').fadeIn().delay(2000).fadeOut(1000);    
			}
		});
	}
	function deleteZoneInstance(){
		var projectId = sessvars.sessionObj['projectId']
		var zoneInstanceId = $('select#id_zoneInstance_name').find("option:selected").val()
		$.ajax({
			type: "POST",
			url: '/pmp/zones/',
			data: JSON.stringify({'projectId': projectId, 'select': 'deleteZone', 'zoneInstanceId': zoneInstanceId}),
			success: function(data){
				$('#zonesForm').html(data)
				$('#success').fadeIn().delay(2000).fadeOut(1000);    
			}
		});
	}
	$('.nav-tabs').button()
</script>

{% load widget_tweaks %}

{% if zoneFD %}
<form id="zoneInstanceF" class="form-horizontal">
	{{ zoneFD.management_form }}
	<div class="control-group">
		<label class="control-label">Select or add a zone</label>
		<div class="controls">{{ zoneFD.name }}
			<input type="image" src="/static/admin/img/icon_addlink.gif" width="10" height="10" alt="Add Another" onclick="addZoneInstance(); return false;">
			</div>
	</div>
</form>
{% endif %}

{% if zoneInstance %}
{{ zoneInstance.management_form }}
<form id="zoneIF" class="form-horizontal">
	{% for field in zoneInstance %}
	{% if field.label == "Name" or field.label == "Zone category" or field.label == "Floor" or field.label == "Orientation" or field.label == "Space type" or field.label == "Zone type" %}
		<div class="control-group">
			<label class="control-label">{{ field.label }}</label>
			<div class="controls">{{ field }}{% if submit %}{{ field.errors }}{% endif %}
				<span class="help-inline">{{field.help_text}}</span>
			</div>
		</div>
	{% endif %}
	{% if field.label == "Zone map, Other zones" %}
		<div class="control-group">
			<label class="control-label">Zone map</label>
			<div class="controls">
				{{ field }}{% if submit %}{{ field.errors }}{% endif %}
				<div style="margin-top: 5px">
					Limit the zone categories you want to show on the map (for previously defined zones)<br>
					<label class="checkbox inline">
					  <input name="other_zones_check[]" type="checkbox" value="Acoustics"> Acoustics
					</label>
					<label class="checkbox inline">
					  <input name="other_zones_check[]" type="checkbox" value="IAQ"> IAQ
					</label>
					<label class="checkbox inline">
					  <input name="other_zones_check[]" type="checkbox" value="Lighting"> Lighting
					</label>
					<label class="checkbox inline">
					  <input name="other_zones_check[]" type="checkbox" value="Thermal comfort"> Thermal comfort
					</label>
					&nbsp;&nbsp;&nbsp;<button class="btn btn-mini" id="refresh_map" style="margin-top: 10px"><i class="icon-refresh"></i>&nbsp;Refresh map</button>	
				</div>
			</div>
		</div>
	{% endif %}	
	{% endfor %}
	<button type="button" class="btn btn-small" data-toggle="button" id="btn_more_options" style="margin-bottom: 15px">Show/hide optional fields</button>
	<div id='zone_more_options'>
	{% for field in zoneInstance %}
	{% if field.label == "Area" or field.label == "Ceiling reflectance" or field.label == "Nwall reflectance" or field.label == "Ewall reflectance" or field.label == "Swall reflectance" or field.label == "Wwall reflectance" or field.label == "Floor reflectance" or field.label == "Ceiling finish" or field.label == "Nwall finish" or field.label == "Ewall finish" or field.label == "Swall finish" or field.label == "Wwall finish" or field.label == "Floor finish" %}
		<div class="control-group">
			<label class="control-label">{{ field.label }}</label>
			<div class="controls">
				{{ field }}{% if submit %}{{ field.errors }}{% endif %}
				<span class="help-inline">{{field.help_text}}</span>
			</div>
		</div>
	{% endif %}		
	{% endfor %}
	</div>
	<p><label class="checkbox"><input type="checkbox" id="saveDefault" name="saveDefault"/>Save as default for new zones</label></p>
	<p style="margin-top: 5px">
		<input type="submit" class="btn" value="Save" onclick="submitZoneInstance(); return false;"/>
		<input type="submit" class="btn" value="Cancel" onclick="addZoneInstance(); return false;"/>
		<input type="submit" class="btn" value="Delete" onclick="deleteZoneInstance(); return false;"/>
		<input type="submit" class="btn" value="Reset defaults" onclick="delete sessvars.sessionObj.zone_defaults; delete sessvars.sessionObj.options; delete sessvars.sessionObj.zone_categories; addZoneInstance(); return false;"/>
		<span id="success"><strong>&nbsp;&nbsp;{{ saveStatus }}</strong></span>
	</p>
</form>
{% endif %}
